<template>
	<view>
		<view class="app">
			<view class="content">
				<map name="" id="map1" ref="map1" style="width: 750px;height: 90vh;" :layer-style="5"
					:show-location="true" :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale"
					:circles="circles" @markertap="markertap" @callouttap="callouttap" :polyline="polyline">
					<!-- 搜索框 -->
					<view class="" :style="{
							position: 'absolute',
							left: '32rpx',
							top: navHeight + 'px'
						}">
						<u-search @clickIcon="clickIcon" searchIconSize="38" search-icon="/static/img/index/avatar.png"
							customStyle="width: 586rpx;height: 84rpx;ackground: #FFF;border-radius: 42rpx 42rpx 42rpx 42rpx;opacity: 1"
							:height="42" :showAction="false" placeholder="在此处搜索" v-model="keyword" :clearabled="true"
							searchIconColor="#7d7d7d" bgColor="#ffffff"></u-search>
					</view>
					<!-- 加号 -->
					<view class="" :style="{
							position: 'absolute',
							left: '87vw',
							top: navHeight + 'px'
						}">
						<view class="" class="flex-cen"
							style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
							<image src="" mode="" src="../../static/img/index/sizijia.svg" mode=""
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
					<!-- tagbs -->
					<view class="tabs" :style="{
							position: 'absolute',
							left: '32rpx',
							top:navHeight + 42 + 11 + 'px'
						}">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view class="scroll-view-item_H uni-bg-red" v-for="(item, index) in tabsList" :key="index">
								<view class="item">
									<view class="flex">
										<view class="tp">
											<image :src="item.url" mode="" style="width: 26rpx;height: 26rpx;"></image>
										</view>
										<view class="name">
											<view class="url">{{ item.name }}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 蓝牙通知 -->
					<view class="" :style="{
							position: 'absolute',
							left: '32rpx',
							top: '500px'
						}">
						<view class="blueTouch">
							<view class="flex">
								<view class="item mr12 flex-cen">
									<view class="">
										<image src="/static/img/index/blueTouch.svg" mode=""
											style="width: 38rpx;height: 32rpx;"></image>
										<view class="text">未连接</view>
									</view>
								</view>
								<view class="item flex-cen">
									<image src="/static/img/index/bell.svg" mode="" style="width: 40rpx;height: 46rpx;">
									</image>
									<view class="flex-c"></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 定位 -->
					<view class="" :style="{
							position: 'absolute',
							left: '87vw',
							top: '500px'
						}">
						<view class="" class="flex-cen"
							style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
							<image src="" mode="" src="../../static/img/index/message.svg" mode=""
								style="width: 48rpx;height: 38rpx;"></image>
						</view>
					</view>
					<view class="" :style="{
							position: 'absolute',
							left: '87vw',
							top: '550px'
						}">
						<view class="" class="flex-cen"
							style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
							<image src="" mode="" src="../../static/img/index/gps.svg" mode=""
								style="width: 48rpx;height: 48rpx;"></image>
						</view>
					</view>
				</map>

				<!-- 上弹框 -->
				<view>
					<u-popup :show="show" @close="close" @open="open" mode="top" :overlay="false">
						<view class="" style="#FFF">
							<view class="ml30 mr30">
								<view class="h" :style="{height: navHeight + 'px'}">

								</view>
								<view class="flex">
									<u-search searchIconSize="38" search-icon="/static/img/index/avatar.png"
										customStyle="width: 578rpx;height: 84rpx;background: #F6F6F6;border-radius: 42rpx 0rpx 0rpx 42rpx;opacity: 1;"
										:height="42" :showAction="false" placeholder="在此处搜索" v-model="keyword"
										:clearabled="true" searchIconColor="#7d7d7d" bgColor="#F6F6F6"></u-search>
									<view class="flex-cen"
										style="width: 112rpx;height: 84rpx;background: #A14BFF;border-radius: 0rpx 42rpx 42rpx 0rpx;opacity: 1;">
										<view class=""
											style="width: 56rpx;height: 40rpx;font-size: 28rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;">
											搜索
										</view>
									</view>
								</view>

							</view>
						</view>
					</u-popup>
				</view>

				<!-- 弹框 -->
				<view class="">
					<danH-threeDrawer ref="panelref" :movePercentage="movePercentage" :bottomSpac="bottomSpac"
						:topSpac="topSpac" @movePercentage="movePercentage">

						<scroll-view scroll-y="true" style="width: 200px;: 100px;overflow-y: scroll;" @scroll="scroll">
							<view v-for="item,index in 50" :key="index">
								{{index}}
							</view>
						</scroll-view>
						<!-- <view class="item mt22 ml30 mr32" v-for="i,index in 20" :key="index"
								style="width: 690rpx;height: 576rpx;background: #2D2C2A;border-radius: 22rpx 22rpx 22rpx 22rpx;opacity: 1;">
							</view> -->

						<!-- 						<view style="width: 100%; height: 100%;">
							<view class="ml32 mr32">
								<u-tabs :list="list1" scrollable="true"></u-tabs>
							</view>
						</view> -->
					</danH-threeDrawer>
				</view>

				<!-- 底部 -->
				<tabbar></tabbar>
			</view>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	// var navHeight = getApp().globalData.navHeight + 'px';
	export default {
		data() {
			return {
				/* 上弹框 */
				show: false,
				/* 三段 */
				differential: 0,
				move: false,
				/* 比较值 */
				panlPercent: 60,

				/* 最小高度rpx */
				bottomSpac: 220,
				/* 中间状态高度，默认计算最高到最低高度的一半 */
				middleSpace: 250,
				/* 初始化时是否在中间位置 */
				isMiddle: true,





				/* tabs */
				list1: [{
						name: '关注'
					},
					{
						name: '推荐'
					},
					{
						name: '电影'
					},
					{
						name: '科技'
					},
					{
						name: '音乐'
					},
					{
						name: '美食'
					},
					{
						name: '文化'
					},
					{
						name: '财经'
					},
					{
						name: '手工'
					}
				],

				/* 搜素框 */
				keyword: '',
				/* 分类 */
				tabsList: [{
						name: '家庭',
						url: '/static/img/index/people.svg'
					},
					{
						name: '推荐',
						url: '/static/img/index/hot.svg'
					},
					{
						name: '商圈',
						url: '/static/img/index/package.svg'
					},
					{
						name: '交友',
						url: '/static/img/index/chat.svg'
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg'
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg'
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg'
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg'
					}
				],

				/* 状态栏高度 */
				statusBarHeight: statusBarHeight,
				/* 胶囊高度 */
				navHeight: 0,
				/* 地图 */
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				nowLatitude: 0,
				nowLongitude: 0,
				scale: 13, //缩放级别
				bottomData: false,
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 1,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 2,
						latitude: 23.1338, //纬度
						longitude: 113.33052, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '德隆大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 3,
						latitude: 23.136455, //纬度
						longitude: 113.329002, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '羊城国际商贸中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 4,
						latitude: 23.224781, //纬度
						longitude: 113.293911, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '天瑞广场A座', //文本
							color: '#ffffff', //文字颜色
							fontSize: 16, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '12',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 5,
						latitude: 23.072726, //纬度
						longitude: 113.277921, //经度
						iconPath: '/static/img/index/54171.png', //显示的图标
						rotate: 0, // 旋转度数
						width: 55, //宽
						height: 70, //高
						alpha: 1, //透明度
						controls: [{
							//在地图上显示控件，控件不随着地图移动
							id: 31, //控件id
							iconPath: '/static/logo.png', //显示的图标
							position: {
								//控件在地图的位置
								left: 50,
								top: 50,
								width: 55,
								height: 70
							}
						}]
					}
				],
				circles: [{
					//在地图上显示圆
					latitude: 40.013,
					longitude: 118.685,
					fillColor: '#000', //填充颜色
					color: '#0016ca', //描边的颜色
					radius: 20, //半径
					strokeWidth: 2 //描边的宽度
				}],
				polyline: [{
					//指定一系列坐标点，从数组第一项连线至最后一项
					points: [{
							latitude: 23.13065,
							longitude: 113.3274
						},
						{
							latitude: 23.106574,
							longitude: 113.324587
						}
					],
					color: '#A054FE', //线的颜色
					width: 4, //线的宽度
					dottedLine: false, //是否虚线
					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				}]
			};
		},
		computed: {
			/* 最高点距离顶部距离rpx */
			topSpac() {
				return (this.navHeight + 42) * 2;
			}
		},
		methods: {
			/* 滚动 */
			scroll(e) {
				console.log(e, "e");
			},

			/* 搜索框跳转我的 */
			clickIcon() {
				uni.navigateTo({
					url: '/pages_user/my/my'
				})
			},
			/* 弹框开关 */
			open() {
				// console.log('open');
			},
			close() {
				this.show = false;
				// console.log('close');
			},

			ok() {
				console.log("ok");
			},
			//底部滑动的大小
			movePercentage(percentage) {
				console.log(percentage);
				if (percentage.percent == 100) {
					console.log("高");
					console.log(this.$refs.panelref, "this.$refs.panelref");
					// this.$refs.panelref.touchendHandle = this.ok()
					// touchendHandle
					this.show = true;

				}
				if (percentage.percent == 50) {
					console.log("中");
					this.show = false;
				}
				if (percentage.percent == 0) {
					console.log("低");
					this.show = false;
				}
				if (this.panlPercent == percentage.percent) {
					console.log('开始');
					return;
				}
				this.panlPercent = percentage.percent;
				this.move = false;
				if (percentage.isEnd) {
					console.log('结束');
					this.move = true;
				}
				this.differential = -(((this.maxMapHeight / 3) * percentage.percent) / 100);
			}
		},

		mounted() {
			uni.hideTabBar();
		},

		onShow() {
			console.log(getApp().globalData);
			console.log(getApp().globalData.navHeight, 'getApp().globalData.navHeight');
			this.navHeight = getApp().globalData.navHeight;
		},
	};
</script>

<style lang="scss">
	.blueTouch {
		.item {
			width: 82rpx;
			height: 82rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
		}

		.flex {
			image {}

			.text {
				// width: 36rpx;
				height: 16rpx;
				font-size: 12rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #31312f;
				// line-height: 0rpx;
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}
	}

	/* tabs */
	.scroll-view_H {
		white-space: nowrap;
		width: 750rpx;

		.scroll-view-item_H {
			display: inline-block;
			width: 152rpx;
			height: 58rpx;
			line-height: 58rpx;
			background: #ffffff;
			// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 29rpx 29rpx 29rpx 29rpx;
			opacity: 1;
			margin-left: 14rpx;
		}

		.item {
			.tp {
				padding-left: 14rpx;
			}

			.name {
				margin-left: 14rpx;
			}
		}
	}
</style>